标签：VUE

Vue 教程

Vue 条件渲染

logo 24 2022-03-28

条件渲染： 方式一：v-if 写法： (1)、v-if="表达式" (2)、v-else-if="表达式" (3)、v-else="表达式" 适用于：切换频率较低的场景。 特点：不展示的DOM元素直接被移除。 注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。 方式二、v-sho ...

详情...
Vue 教程

Vue 绑定样式

logo 19 2022-03-25

绑定样式： 两种形式 1、class样式 写法:class="xxx" xxx可以是字符串、对象、数组。 字符串写法适用于：类名不确定，要动态获取。 数组写法适用于：要绑定多个样式，个数不确定，名字也不确定。 对象写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。 2、st ...

详情...
Vue 教程

Vue 之监视属性

logo 53 2022-03-23

监视属性watch： 监视属性当前在Vue文档中叫做 侦听器，知道是一回事就行。 1、当被监视的属性变化时, 回调函数自动调用, 进行相关操作 2、监视的属性必须存在，才能进行监视！！ 3、监视的两种写法： (1)、new Vue 时传入 watch 配置 (2)、通过 vm.$watch 监视 代码 ...

详情...
Vue 教程

Vue 之计算属性

logo 38 2022-03-22

姓名案例 修改姓和名输入框实时更新全名展示 插值语法实现 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>姓名案例_插值语法实现</ti ...

详情...
Vue 教程

Vue 之事件处理

logo 24 2022-03-22

事件的基本使用 1、使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名； 2、事件的回调需要配置在methods对象中，最终会在vm上； 3、methods中配置的函数，不要用箭头函数！否则this就不是vm了； 4、methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例 ...

详情...
Vue 教程

Vue 之数据代理

logo 32 2022-03-22

Object.defineproperty方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>回顾Object.defineproperty方法 ...

详情...
Vue 教程

Vue 之 MVVM 模型介绍

logo 34 2022-03-22

MVVM模型 M：模型(Model) ：data中的数据 V：视图(View) ：模板代码 VM：视图模型(ViewModel)：Vue实例 观察发现： 1、data中所有的属性，最后都出现在了vm身上。 2、vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。 参考代码 <!DOCTY ...

详情...
Vue 教程

Vue el与data的2种写法

logo 28 2022-03-22

el与data的2种写法 1、el有2种写法 (1)、new Vue时候配置el属性。 (2)、先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。 2、data有2种写法 (1).对象式 (2).函数式 如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。 3 ...

详情...
Vue 教程

Vue 数据绑定

logo 36 2022-03-22

数据绑定 Vue中有2种数据绑定的方式 1、单向绑定(v-bind)：数据只能从data流向页面。 2、双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。 备注 1、双向绑定一般都应用在表单类元素上（如：input、select等） 2、v-model:value 可以简写为 v- ...

详情...
Vue 教程

Vue 模板语法

logo 37 2022-03-22

Vue模板语法有2大类 1、插值语法： 功能：用于解析标签体内容。 写法：{\{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。 2、指令语法： 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。 举例：v-bind:href="xxx" 或 简写为 :hr ...

详情...